Node / mirrors / respira / files / src / components / ConnectionPrompt.tsx

Displaying Raw • Download

import { useShallow } from 'zustand/react/shallow';

import { useMachineStore } from '../stores/useMachineStore';

import { isBluetoothSupported } from '../utils/bluetoothSupport';

import { ExclamationTriangleIcon } from '@heroicons/react/24/solid';

export function ConnectionPrompt() {

const { connect } = useMachineStore(

useShallow((state) => ({

connect: state.connect,

}))

);

if (isBluetoothSupported()) {

return (

<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md border-l-4 border-gray-400 dark:border-gray-600">

<div className="flex items-start gap-3 mb-3">

<div className="w-6 h-6 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5">

<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">

<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />

</svg>

</div>

<div className="flex-1 min-w-0">

<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">Get Started</h3>

<p className="text-xs text-gray-600 dark:text-gray-400">Connect to your embroidery machine</p>

</div>

</div>

<button

onClick={connect}

className="w-full flex items-center justify-center gap-2 px-3 py-2.5 sm:py-2 bg-blue-600 dark:bg-blue-700 text-white rounded font-semibold text-sm hover:bg-blue-700 dark:hover:bg-blue-600 active:bg-blue-800 dark:active:bg-blue-500 transition-colors cursor-pointer"

>

Connect to Machine

</button>

</div>

);

}

return (

<div className="bg-amber-50 dark:bg-amber-900/20 p-4 rounded-lg shadow-md border-l-4 border-amber-500 dark:border-amber-600">

<div className="flex items-start gap-3">

<ExclamationTriangleIcon className="w-6 h-6 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />

<div className="flex-1 min-w-0">

<h3 className="text-base font-semibold text-amber-900 dark:text-amber-100 mb-2">Browser Not Supported</h3>

<p className="text-sm text-amber-800 dark:text-amber-200 mb-3">

Your browser doesn't support Web Bluetooth, which is required to connect to your embroidery machine.

</p>

<div className="space-y-2">

<p className="text-sm font-semibold text-amber-900 dark:text-amber-100">Please try one of these options:</p>

<ul className="text-sm text-amber-800 dark:text-amber-200 space-y-1.5 ml-4 list-disc">

<li>Use a supported browser (Chrome, Edge, or Opera)</li>

<li>

Download the Desktop app from{' '}

<a

href="https://github.com/jhbruhn/respira/releases/latest"

target="_blank"

rel="noopener noreferrer"

className="font-semibold underline hover:text-amber-900 dark:hover:text-amber-50 transition-colors"

>

GitHub Releases

</a>

</li>

</ul>

</div>

</div>

</div>

</div>

);

}